<template>
    <div>
        <el-row>
            <el-col :span="1">
                <div style="height: 1px"/>
            </el-col>
            <el-col :span="22">
                <div style="width: 1378px;height: 40px;position: fixed;z-index: 5;background-color: #323232;opacity: 0.97;text-align: right">
                    <el-popover  placement="bottom" title="登录" width="auto" trigger="click">
                        <el-button  @click="visible=false"  :style="{ display: visibleCancel }" slot="reference" style="width: 95px;">登录</el-button>
                        <el-button type="primary" @click="outlogin()" :style="{ display: visiblePublish }" slot="reference" style="width: 150px;">{{loginform.cusAccount}}已经登录</el-button>

                        <el-form
                                :model="loginform"
                                status-icon
                                :rules="rules"
                                ref="loginform"
                                style="width: 270px;height: 270px;text-align: center"
                        >

                            <el-form-item prop="cusAccount">
                                <el-input
                                        prefix-icon="el-icon-user"
                                        placeholder="用户名"
                                        v-model="loginform.cusAccount"
                                        clearable
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="cusPwd">
                                <el-input
                                        prefix-icon="el-icon-key"
                                        placeholder="密码"
                                        type="password"
                                        v-model="loginform.cusPwd"
                                        clearable
                                ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-switch v-model="value" active-text="记住用户名密码" inactive-text="不记住用户名密码"/>
                                <el-button type="success" @click="loginbtn()" style="margin-right: 45px" round>登录</el-button>
                                <el-button @click="resetForm()" type="info" round>重置</el-button>
                            </el-form-item>





                            <el-form-item>
                                    没有账户？
                                    <el-link type="primary" @click="register" style="font-size: 17px;">去注册</el-link>
                            </el-form-item>
                        </el-form>


                    </el-popover>





                    <el-popover placement="bottom" title="注册" width="auto" trigger="click">
                        <el-button slot="reference" style="width: 95px;">注册</el-button>
                        <el-form
                                ref="PassengerInfo"
                                :model="PassengerInfo"
                                :rules="rules"
                                label-width="80px"
                                style="width: 400px;"
                        >
                            <p>帐户基本信息</p>
                            <el-form-item label="账  号" prop="cusAccount">
                                <el-input v-model="PassengerInfo.cusAccount"></el-input>
                            </el-form-item>
                            <el-form-item label="昵  称" prop="cus_names">
                                <el-input v-model="PassengerInfo.cusNames"></el-input>
                            </el-form-item>
                            <el-form-item label="性  别" prop="cusSex">
                                <el-radio-group v-model="PassengerInfo.cusSex">
                                    <el-radio label="m">男</el-radio>
                                    <el-radio label="f">女</el-radio>
                                    <!--                            <el-radio label="no"></el-radio>-->
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="登录密码" prop="cusPwd">
                                <el-input type="password" v-model="PassengerInfo.cusPwd"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="checkPass">
                                <el-input v-model="PassengerInfo.checkPass" type="password" placeHolder="请再次输入密码"/>
                            </el-form-item>
                            <el-form-item label="真实姓名" prop="cusName">
                                <el-input  v-model="PassengerInfo.cusName"></el-input>
                            </el-form-item>


                            <el-form-item label="身份证号" prop="cusId">
                                <el-input v-model="PassengerInfo.cusId" minlength="18" maxlength="18"></el-input>
                            </el-form-item>
                            <el-form-item label="手  机 号" prop="cusTelNumber">
                                <el-input v-model="PassengerInfo.cusTelNumber" maxlength="11"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱地址" prop="cusEmail">
                                <el-input v-model="PassengerInfo.cusEmail" maxlength="18"></el-input>
                            </el-form-item>
<!--                            <el-form-item label="验证 码" prop="passengerPhone">-->
<!--                                <el-input-->
<!--                                    v-model="PassengerInfo.seccode"-->
<!--                                    prefix-icon="icon-login_auth"-->
<!--                                    label="验证码"-->
<!--                                    style="width: 100px;"-->

<!--                                 maxlength="11"></el-input>-->
<!--                                <span class="checkCode" @click="createCode" style="width: 20px;height: 20px">1{{checkCode}}2</span>-->


<!--                            </el-form-item>-->
                            <span style="margin-left: 20px">验证码</span>
                            <el-input
                                    v-model="PassengerInfo.seccode"
                                    placeholder="验 证 码"
                                    style="width: 200px;left: 16px"
                            >
                            </el-input>
                            <span class="checkCode" @click="createCode()" style="margin-left: 50px">{{ checkCode}}</span>





                            <el-form-item style="margin-left: 46px;">
                                <el-button type="success" @click="registry('PassengerInfo')" round>注册</el-button>
                                <el-button type="danger" @click="reback" round>返回</el-button>
                            </el-form-item>


                        </el-form>

                    </el-popover>

                </div>
                <div style="height: 40px;width: 100%;background-color: #323232;"></div>
            </el-col>
            <el-col :span="1">
                <div style="height: 1px"/>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="1">
                <div style="height: 5px"/>
            </el-col>
            <el-col :span="22">
                <div class="wrapper">

                </div>
                <el-container>
                    <el-header>
                        <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" v-bind:router="true">
                            <el-menu-item index="/first">首页</el-menu-item>
                            <el-menu-item index="/order">机票预订</el-menu-item>
                            <el-menu-item index="/vip">会员中心</el-menu-item>
                            <el-menu-item index="/about">走进东方</el-menu-item>
                            <el-menu-item index="/chat">联系我们</el-menu-item>
                        </el-menu>
                    </el-header>
                    <el-main>
                        <transition enter-active-class="animated bounceInUp"
                                    leave-active-class="animated zoomOut">
                            <router-view/>
                        </transition>
                    </el-main>
                </el-container>

            </el-col>
            <el-col :span="1">
                <div style="height: 5px"/>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="1">
                <div style="height: 5px"/>
            </el-col>
            <el-col :span="22">
                <div class="down"></div>
            </el-col>
            <el-col :span="1">
                <div style="height: 5px"/>
            </el-col>
        </el-row>


    </div>

</template>

<script>
    import Vue from 'vue'
    export default {

        name:"Index.vue",
        data(){
            var validatePass = (rule, value, callback) => {
                if (value !== this.PassengerInfo.cusPwd) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            let validEmail = (rule, value, callback) => {
                if (!value || value === '') {
                    return callback(new Error("邮箱不能为空"));
                }
                let pattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if (!pattern.test(value)) {
                    return callback(new Error("邮箱格式错误"))
                }
                return callback();
            };

            return {
                visibleCancel: '',   //显示
                visiblePublish: 'none',   //显示 visibleCancel: '',   //显示
                value:true,
                loginform: {
                    cusAccount: "",
                    cusPwd: ""

                },
                loginVisible:true,
                onlineVisible:false,
                PassengerInfo: {
                    cusAccount: "",
                    cusPwd: "",

                    cusNames:"",
                    cusTelNumber:"",
                    cusSex: "m",
                    cusId: "",
                    cusEmail: "",
                    cusName:"",

                    checkPass:"",
                    passengerPhone:""

                },


                rules: {
                    cusNames: [
                        {required: true, message: '昵称不能为空', trigger: 'blur'},
                        {min: 6, max: 20, message: '昵称6-20之间', trigger: 'blur'},
                    ],
                    cusName: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'},
                        {min: 2, max: 5, message: '姓名2-5之间', trigger: 'blur'},
                    ],

                    cusAccount: [
                        {
                            required: true,
                            message: "用户名不能为空",
                            trigger: "blur"
                        },
                        {
                            min: 2,
                            max: 12,
                            message: "长度在2-12之间",
                            trigger: "blur"
                        }
                    ],
                    cusSex: [
                        {required: true, message: "请选择性别", trigger: "blur"}
                    ],
                    cusPwd: [
                        {
                            required: true,
                            message: "密码不能为空",
                            trigger: "blur"
                        },
                        {
                            min: 6,
                            max: 20,
                            message: "长度在6-20之间",
                            trigger: "blur"
                        }
                    ],
                    checkPass: [
                        {
                            required: true,
                            message: "确认密码不能为空",
                            trigger: "blur"
                        },
                        {
                            min: 6,
                            max: 20,
                            message: "长度在6-20之间",
                            trigger: "blur"
                        },
                        {
                            validator: validatePass,
                            trigger: "blur"
                        }
                    ],
                    cusEmail: [
                        {validator: validEmail, trigger: "blur"}
                    ],
                    cusId: [
                        {
                            required: true,
                            message: "身份证号不能为空",
                            trigger: "blur"
                        },
                        {
                            pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
                            message: "请输入正确的身份证号",
                            trigger: "blur"
                        }
                    ],
                    cusTelNumber: [
                        {
                            required: true,
                            message: "手机号不能为空",
                            trigger: "blur"
                        },
                        {
                            pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
                            message: "请输入正确的手机号",
                            trigger: "blur"
                        }
                    ],
                    cusAccount: [
                        {
                            required: true,
                            message: "用户名不能为空",
                            trigger: "blur"
                        },
                        {
                            min: 2,
                            max: 30,
                            message: "长度在2-30之间",
                            trigger: "blur"
                        }
                    ],
                    cusPwd: [
                        {
                            required: true,
                            message: "密码不能为空",
                            trigger: "blur"
                        },
                        {
                            min: 6,
                            max: 20,
                            message: "长度在6-20之间",
                            trigger: "blur"
                        }
                    ],

                }
            };
        },
        mounted() {
            this.createCode();
        },
            methods:{
                outlogin(){
                    this.loginform.cusAccount = "";
                    this.loginform.cusPwd = "";
                    this.visibleCancel= '';
                    this.visiblePublish='none';   //显示 visibleCancel: '',   //显示
                    this.$message({
                        title:'提示',
                        message:"用户退出成功",
                        type:'success'
                    })
                },
                createCode() {
                    var code = "";
                    const codeLength = 4; //验证码的长度
                    const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数
                    for (let i = 0; i < codeLength; i++) { //循环操作
                        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
                        code =code+ random[index]; //根据索引取得随机数加到code上
                    }
                    this.checkCode = code; //把code值赋给验证码
                },
                registry(){
                    //1.先验证表单没问题了在发送
                    let form=this.$refs['PassengerInfo'];
                    form.validate((valid)=>{
                        if (valid){
                            //进行表单的提交
                            //clone对象
                            let payLoad=_.clone(this.PassengerInfo);
                            //删除payLoad的checkPass;
                            delete payLoad.checkPass;
                            delete  payLoad.passengerPhone;
                            axios.post("/children/register", payLoad).then(response=>{
                                if(response.data==='success'){
                                    this.$message({
                                        title:'提示',
                                        message:"用户保存成功",
                                        type:'success'
                                    })
                                }

                            })
                        }else{
                            return false;
                        }
                    })
                },

                loginbtn() {
                    axios.post("/children/login", this.loginform)
                        .then (response => {
                            let customer=response.data;
                            this.$store.commit("setCustomer",customer);


                            this.$message({
                                showClose:false,
                                message:"恭喜你登录成功",
                                type:"success",
                            })
                            this.visibleCancel='none'; //显示
                            this.visiblePublish= '';   //显示 visibleCancel: '',   //显示


                            /*const userMsg = {
                                userSite : '上海市浦东新区'
                            }
                            Vue.prototype.$userMsg = userMsg;    //将全局变量模块挂载到Vue.prototype中
                            this.$router.push({path:'/vip'});*/






                        })
                        .catch(error=>console.log(error))
                },
                isEmpty(value) {
                    return (
                        value === undefined ||
                        value === null ||
                        (typeof value === "object" && Object.keys(value).length === 0) ||
                        (typeof value === "string" && value.trim().length === 0)
                    );
                },
                register() {
                    this.$router.push("/vip");
                },
                resetForm() {
                    this.loginform.cusAccount = "";
                    this.loginform.cusPwd = "";
                },

            reback() {
                this.$router.push("/login");
            }
        }
    }
</script>

<style scoped>
    .wrapper{
        background-image: url("../assets/AirEast.png");
        background-repeat: no-repeat;
        text-align-all: center;
        height: 200px;
        width: 100%;
    }
    .down{
        background-image: url("../assets/DFDown.png");
        width: 100%;
        height: 655px;
    }


</style>
